/* 清除浏览器默认的内外边距 */
*{
    margin: 0;
    padding: 0;
}
/* 设置版心 */
.w{
    width: 1200px;
    margin:  0 auto;
    
}
body{
    background-color: #fff;
}
input,
button{
    /* 默认有灰色边框需要手动去掉 */
    border: 0;
    outline: none;
    
}
/* 清除所有的li的小圆点 */
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }   

/* 头部模块 */
.header{
    height: 42px;
    /* 把头部模块做完后去掉背景颜色 */
    /* background-color: pink; */
    /* background-color: #f3f5f7; */
    /* 注意此地方会层叠w里面的margin */
    margin: 30px auto;
    /* line-height: 42px; */
}
/* logo部分 */
.logo{
    float: left;
    width: 198px;
    height: 42px;
    /* background-color:purple; */
}
/* 导航栏nav部分 */
.nav{
    float: left;
    margin-left: 30px;
    
}
.nav ul li{
    /* 让a标签按行显示 */
   float: left;
   /* 设置li距离nav盒子的左边距 */
   margin-left: 15px;
}
.nav ul li a{
    /* 设置a盒子的左右边距 */
    padding: 0 15px;
    line-height: 42px;
    font-size: 18px;
    color: #000;
} 
.nav ul li a:hover{
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}
/* search部分 */
.search{
    float: left;
    /* 注意这个盒子的宽度要大一点 */
    width: 412px;
    height: 42px;
    background-color:skyblue;
    margin-left: 70px;
}
.search input{
    float: left;
    width: 345px;
    /* 注意input总高度42px = 本身高度 + 上下边框 */
    height: 40px;
    border:1px solid #00a4ff;
    border-right: none;
    padding-left: 15px;
    font-size: 14px;
    color: #ccc;
    
}
.search button{
    /* 行内块元素之间默认有间隙，利用浮动清除间隙 */
    float: left;
    width: 50px;
    height: 42px;
    /* 去掉button默认的边框 */
    border: 0;
    /* 小logo和小图片适合用背景图片来做 */
    background: url("images/search-btn.png");
}
/* 用户模块 */
.user {
    float: right;
    height: 42px;
    line-height: 42px;
    padding-right: 36px;
    font-size: 14px;
    color: #666666;
}
/* banner模块 */
.banner{
    width: 100%;
    height: 421px;
    background-color: #330066;
}
/* banner的版心部分 */
.banner .w{
    height: 421px;
    /* 设置背景图片不平铺水平居中对齐 */
    background: url("images/banner.png") no-repeat top center;
}
/* subnav侧导航栏部分 */
.subnav{
    float: left;
    width: 190px;
    height: 421px;
    /* background-color:#000033; */
    background: rgba(00, 00,00, 0.4);

}
.subnav ul li {
    height: 45px;
    line-height: 45px;
    /* li左右边距 */
    padding: 0 20px 0 46px;
    color:#fff;

}
.subnav ul li a{
    font-size: 14px;
    color:#fff;
    /* color:#00ccff; */
}
.subnav ul li a span{
    float: right;
}
.subnav ul li a:hover{
    color: #00a4ff;
}

/*course模块  */
.course{
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    /* 浮动的盒子不会有外边距合并的问题 */
    margin: 50px ;
}
.course h2{
    height: 48px;
    background-color:#99ccff;
    line-height: 48px;
    text-align: center;
    /* font-weight: normal; */
    font-size: 18px;
    color: #fff;
}
.bd {
    padding: 0 20px;
}
.bd ul li{
    padding: 14px 0;
    border-bottom:1px solid #ccc;
}
.bd ul li h4{
    font-size: 16px;
    color: #4e4e4e;
}
.bd ul li p{
    font-size: 12px;
    color: #999;
}
.bd .more{
    /* 转换为块级元素设置a的高度 */
    display: block;
    height: 38px;
    /* 添加边框 */
    border: 1px solid #0099ff ;
    /* 设置垂直居中、水平居中 */
    line-height: 38px;
    text-align: center;
    /* 设置外边距 */
    margin-top: 5px;
    /* 设置字体属性 */
    font-size: 16px;
    color: #0099ff;
    /* 设置字体加粗，不用加单位px */
    font-weight: 700;

}
/* 精品推荐小模块 */
.goods {
    /* 设置goods的高，宽为版心宽度 */
    height: 60px;
    background-color: #fff;
    margin-top: 10px;
    /* 行高会继承给h3、ul、a 3个孩子 */
    line-height: 60px;
    /* 设置盒子阴影(参数要记清楚) */
    box-shadow: 0 2px 3px 3px rgba(0,0, 0, 0.1);    
}
.goods h3{
    float: left;
    padding: 0 30px;
    font-size: 16px;
    color: #0099ff;
}
.goods ul li {
    float: left;
    
}
.goods ul li a{
    padding: 0 30px;
    /* 设置a的左边框 */
    border-left: 1px solid #ccc;
}
.mod{
    float: right;
    padding-right: 30px;
    font-size: 14px;
    color: #0099ff;

}

/* 精品推荐大模块（核心部分） */
.box {
    margin-top: 30px;
}
.box-hd{
    height: 45px;
}
.box-hd h3{
    float: left;
    font-size: 20px;
    color: #333;
}
.box-hd .look-all {
    float:right;
    margin-top: 10px;
    margin-right: 30px;
    font-size: 12px;
    color: #999;
}

.box-bd ul{
    /* 这里让ul设置足够的宽度，li就不会掉下去了 */
    width: 1225px;
}
.box-bd ul li{
    /* 子绝父相 */
    position: relative;
    float: left;
    width: 228px;
    height: 270px;
    margin-right: 15px;
    margin-bottom: 15px;
}
/* hot小模块 */
.box-bd ul li em{
    position: absolute;
    top: 4px;
    right: -4px;
}
.box-bd ul li > img{
    /* 让图片跟li的宽度一样 */
    width: 100%;
}
.box-bd ul li h4{
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #000;
}
.box-bd ul li p{
    padding-left: 20px;
    font-size: 12px;
    color: #999;
}
.box-bd ul li p span{
    font-size: 12px;
    color: #ff6633;
}

/* footer模块 */
.footer{
    /* 设置页脚的高 */
    height: 415px;

}
.footer .w{
    padding-top: 35px;
    padding-left: 15px;

    /* background-color:pink; */
}
.copyright {
    float: left;
}
.copyright p{
   padding-top: 20px;
   padding-bottom: 10px;
   font-size: 12px;
   color: #666;
}
.copyright .app{
    /* 别忘了转换为块级元素a才能设置宽高 */
    display: block;
    width: 118px;
    height: 30px;
    border: 1px solid #0099ff;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    color: #0099ff;
    
}
.links{
    float: right;
}
.links dl {
    float: left;
    margin-left: 100px;
}
.links dl dt{
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}
.links dl dd a{
    font-size: 12px;
    color: #333;
}